Easy and simple way to create popup in css, let’s create popup for an image. Click here for demo.
Css Code
<style type=”text/css”>
.spiderpic{
position: relative;
z-index: 0;
}
.spiderpic:hover{
background-color: transparent;
z-index: 50;
}
.spiderpic span{ /*CSS for enlarged image*/
position: absolute;
background-color: white;
padding: 5px;
left: -1000px;
border: 1px solid black;
visibility: hidden;
color: black;
text-decoration: none;
}
.spiderpic span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.spiderpic:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
HTML code
<a class=”spiderpic” href=”https://webdesigninfo.wordpress.com”><img src=”http://a.wordpress.com/avatar/settysantu-48.jpg?1180110315″ width=”48px” height=”48px” border=”0″ /><span><img src=”http://www.stumbleupon.com/mainpics/2725502.jpg” /></span></a>
Browser Support: it works in all browsers.
Download this file
webdesigninfo.wordpress.com 
Cool script!
If you add padding-right: 13px to the thumbnail, the larger image to be visible longer: until the user mouses out of the large image.
If the big pic shouldn’t be clickable but you want it viewable longer, put everything into an LI, and do li:hover.
Unfortunately IE6 doesn’t understand :hover pseudoclass on anything other than form elements and links, but javascript can enable IE6 to create an event listener for the LI so it changes class to .hover and li.hover can be equated to li:hover in the CSS
I’m using pop-up images to enhance text understanding by allowing a hover over a word to display an image that the word describes. I’ve set aside a area on the page to display all the images which will be displayed by hovering linked words in the text.
My question is: How do I make all pop-up images appear in the same place on the page. What CSS code can determine an exact X-Y coordinate where the image will appear?
Hi Paul,
Check this this may help u
background-position
Example values: 50px 50px, 10% 5%, 2cm 4cm, 2cm 5%, center, etc.
Specifies the position of a background image for an element.
background-position-x
[length | percentage | horziontal-alignment]. Example values: 50px 50px, 10% 5%, 2cm 4cm, 2cm 5%, center, etc.
Specifies the x-position of a background image for an element.
background-position-y
[length | percentage | vertical-alignment]. Example values: 50px 50px, 10% 5%, 2cm 4cm, 2cm 5%, center, etc.
Specifies the y-position of a background image for an element.
i hope it solves ur problem
Wow, never thought CSS can go this much!
I am learning a lot.
blogging it too.
I was referred to this site by my web design teacher, with whom I have been discussing pop-up techniques. He sent me this link to consider. Thanks for a worthwhile visit! I appreciate the content. There are several really nice tips, techniques, and demos here. I will try to contribute something equally worthwhile. Thank you, santosh and other members of the community for your contributions and efforts. This is a SUPER use of css and it provokes ideas.
That’s great and all, but how do I make a regular pop-up with text of my own?
Do i just make a new .css file and put this code in?
or if not, where then?
dear Dragonlord TZA,
put this code in the same file(html).
Fabulous…any way to modify this for a Flash button onrollover event?
i know i’m stupid (and old) but could someone tell me how i use this code..
Its really cool……………….
thank you….
Hey did you get an answer?? I don’t know how to use this info either……..HELP! ! !
Hi,
Do you know how to create a popup window using only css without using javascript?
Thanks
Hi Raye,
Up to my knowledge it is not possible to create pop-up window using only css we need to use javascript.
Is there a way to make it so that when the mouse leaves the thumbnail, the pop-up image disappears even if the mouse is over the popped-up image?
I know how to make this less likely by moving the pop-up image farther away from the thumbnail, but I was wondering if there’s a way to make it so that even if the mouse is over the pop-up image, it disappears no matter what when the mouse leaves the popped-up image?
If you don’t know what I mean, you can test this by moving the mouse fast to test this.
Thanks SO MUCH for your help! I’m designing a site right now, so any fast answer you can give will be very much appreciated.
Hi Bob,
Can u explain more clearly bcoz i didnt get wht u want?
Hi – I am just learning Dreamweaver and want to do exactly what you are doing when you hover over the words here & demo in your intro. That is to say you get a snapshot open with a pointer to the word you hover over.
Can someone please explain how I can achieve this effect.
Thanks very much.
Hi,
I have tried this, downloading and inserting your code, both html and css.
I have modified the directory references to point to my own PIC folder, in which I have placed your two Spiderman images (small and big), and yet the images fail to appear in execution.
This is discouraging.
CORRECTION OF ABOVE POST . .
I discovered the cut-and-pasted code somehow ended up with quote marks that weren’t understood. The small picture now show, with no enlargement with the roll-over. I will be looking further.
.. I have now downloaded all the code via the utility provided, and it works fine. Thanks!
Wow! This is what i looking for. Cool!!
I was visiting ebay’s “snapshot view” before and wondering how they made it (I’m a newbie in webdesign).
This code is really useful.
Thanks!!
Neat code, but doesn’t work for me in IE6.
Any suggestions?
Works in Firefox
hi Yeuclid,
can u plz provide me link so that i can help u!
Great script, really useful and just what I was looking for. Thank you!
I did a pop-up of an image when the mouse hovers over text, but the enlarged image is pushing all other text out of the way even though I set the z-index of the image higher than the one of the text. Please help!
hi annie,
can u show me demo file.. so that i can help you
I have implemented this on my site – it works great except for in Explorer. In Explorer, the images don’t switch out. I do not have a link on my items as the example shows – they are only meant to show images, not take the viewer anywhere on the click. Is this why? Does anyone know a work-around for this glitch? Thanks!
thank you guys, been looking for this all over the net. Am an amateur advance photographer and a complete newbie to css and javascript. Learning to build personal website to put up video and photos for family and friends to view. Please keep up the good work.
-Jonathan
Ok – I figured it out – did a little google search for “css hover fix ie6” and found a guy with a solution. You add a little code to the css (you can search csshover.htc) to find him – sorry I didn’t save it!
This is a good script. I found this script while trying to find a replacement for a script that is currently on my site, it does the same thing. In the process of testing that script, I found that if you want the image to be a link it doesn’t work in IE. However it does work if you click on the padding (the span tag) around the image. It works fine in FF but for some reason the img tag voids the link. I have tried making a link inside of a link, however browsers don’t like that too much. If anyone has a solution that would be great!
great script! I’m actually using it for a comic book site so your spider-man demo was great!
I notice the positioning in firefox is different than IE with the pop up window. Any ideas?
http://www.bringbackwendell.com/popup.html
Awesome script.
It works fine on a single html file, but it will not work if you put the CSS code in a separate file, say stylesheet.css, and link it from your html file. Any ideas?
Another question, how effecient is this script? Are ALL the pics in the SPAN code loaded everytime the page is called? What if you just want to load the images you hover only?
Do you know how to create a popup window using only css without using javascript?